<template>
	<view class="page-view">
		<navBar title="故障清单"></navBar>
		<view class="bgfff w-100% search-view">
			<view class="w-100% h-88rpx flex-space-between" @click="searchShow = !searchShow">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>检索条件
				</view>
				<image class="w-44rpx h-44rpx select-img mr-32rpx" src="@/static/nav_ic_back_dark.png" mode="" :class="{isSelect:searchShow}"></image>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="" v-if="searchShow">
				<u-form ref="ruleFormRef" :model="form" label-width="160rpx">
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="开始日期" prop="startDate">
						<u-input :disabled="true" v-model="form.startDate" placeholder="请选择开始日期" @click="dateShow = true;isDate=1"/>
						<image v-if="form.startDate" @click="form.startDate=''" class="w-34rpx h-34rpx"
							src="//image01.homedo.com/Files/Images/cms/www/20230529/4861901267873667415_pic1.png"
							mode="">
						</image>
						<image class="w-44rpx h-44rpx qr-img" src="@/static/icon-right.png" mode=""></image>
					</u-form-item>
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="结束日期" prop="endDate">
						<u-input :disabled="true" v-model="form.endDate" placeholder="请选择结束日期" @click="dateShow = true;isDate=2"/>
						<image v-if="form.endDate" @click="form.endDate=''" class="w-34rpx h-34rpx"
							src="//image01.homedo.com/Files/Images/cms/www/20230529/4861901267873667415_pic1.png"
							mode="">
						</image>
						<!-- <text class="uni-icon" v-if="form.endDate" @click="form.endDate=''"><u-icon name="close" color="#c0c4cc" size="28"></u-icon></text> -->
						<image class="w-44rpx h-44rpx qr-img" src="@/static/icon-right.png" mode=""></image>
					</u-form-item>
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="设备名称" prop="deviceName">
						<u-input v-model="form.equpName" placeholder="请输入设备名称"/>
					</u-form-item>
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="设备编码" prop="deviceCode">
						<u-input v-model="form.deviceCode" placeholder="请输入设备编码"/>
					</u-form-item>
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="状态" prop="deviceStatus">
						<u-input :disabled="true" v-model="form.deviceStatusDesc" placeholder="请选择状态" @click="deviceStatusShow = true"/>
						<image v-if="form.deviceStatusDesc" @click="form.deviceStatus = '';form.deviceStatusDesc=''" class="w-34rpx h-34rpx"
							src="//image01.homedo.com/Files/Images/cms/www/20230529/4861901267873667415_pic1.png"
							mode="">
						</image>
						<image class="w-44rpx h-44rpx qr-img" src="@/static/icon-right.png" mode=""></image>
					</u-form-item>
				</u-form>
				<view class="search-btn">
					<view class="btn" @click="searchForm">搜索</view>
				</view>
			</view>
		</view> 
		<view class="content-view" :style="mTopFn()" v-if="deviceList.length>0">
			<view class="bgfff item-view mt-24rpx flex-space-between" v-for="(item,index) in deviceList" :key="index" @click.stop="goFalutHandle(item)" >
				<view class="w-60% flex-wrap-left mb-22rpx">
					<label>设备编号</label>
					<text class="u-line-1">{{item.barcode}}</text>
				</view>
				<view class="w-40% flex-wrap-left mb-22rpx over-item">
					<label>设备名称</label>
					<!-- <uniTooltip :content="item.equpName"> -->
						<text class="u-line-1">{{item.equpName}}</text>
					<!-- </uniTooltip> -->
				</view>
				<view class="w-100% flex-wrap-left mb-22rpx">
					<label>故障描述</label>
					<text class="u-line-1">{{item.faultDesc}}</text>
				</view>
				<view class="w-100% flex-wrap-left mb-22rpx">
					<label>报修时间</label>
					<text class="u-line-1">{{item.repairsTime}}</text>
				</view>
				<view class="w-60% flex-wrap-left mb-22rpx">
					<label>报修人编号</label>
					<text class="u-line-1">{{item.callBy}}</text>
				</view>
				<view class="w-40% flex-wrap-left">
					<label>报修人</label>
					<text class="u-line-1">{{item.callName}}</text>
				</view>
				<view class="w-100% flex-wrap-left">
					<label>报修状态</label>
					<text class="u-line-1">{{item.status}}</text>
				</view>
				
			</view>
		</view>
		<empty v-if="deviceList.length==0"></empty>
		<!-- <scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrollTop" @scroll="scroll">
			<view class="content-view" :style="{marginTop:mTop+'rpx'}">
			</view>
		</scroll-view> -->
		<!-- 选择日期 -->
		<u-calendar v-model="dateShow" :mode="'date'" @change="dateChange"></u-calendar>
		<!-- 设备状态 --> 
		<u-picker mode="selector" v-model="deviceStatusShow"  :default-selector="[0]" :range="deviceStatusList" range-key="label" @confirm="deviceStatusConfirm"></u-picker>
		<diyLoading loadingText="加载中..." :loadingIcon="deng"></diyLoading>
	</view>
</template>

<script setup lang="ts">
import navBar from '@/components/navbar.vue'
import empty from '@/components/empty.vue'
import diyLoading from '@/components/diyLoading.vue'
import { getSelectList } from '@/common/api/equpManage'
// import uniTooltip from '@/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue'
import { ref, watch,onMounted,reactive } from 'vue'
const form = reactive<any>({
	startDate: '',
	endDate: "",
	equpName: '',
	deviceCode: '',
	deviceStatus: 1,
	deviceStatusDesc: '未维修',
					
})
const mTop = ref<number>(0);
const isDate = ref<number>(1);
const dateShow = ref<boolean>(false);
const deviceList = ref([]);
// 状态
const deviceStatusShow = ref<boolean>(false);
const deviceStatusList = reactive([{label:'未维修', value:1},{label:'已维修', value:2}]);
const searchShow = ref<boolean>(false);
const deng = ref<boolean>(false);
const showClearIcon = ref<boolean>(false);

onMounted(()=>{
	const query = uni.createSelectorQuery();
	query.select('.search-view').boundingClientRect((data:any) => {
		mTop.value = data.height + 112;//112+44+12
	}).exec();
	getList()
})
async function getList(): Promise<void> {
	deng.value = true;
	const data = await getSelectList({
		startTime: form.startDate,
		endTime: form.endDate,
		barcode: form.deviceCode,
		equpName:form.equpName,
		status:form.deviceStatus
	})
	deviceList.value = data;
	deng.value = false
}
watch(
	() => searchShow.value,
	() => {
		setTimeout(()=>{
			const query = uni.createSelectorQuery();
			query.select('.search-view').boundingClientRect((data:any) => {
				mTop.value = data.height + 112;//112+44+12
				// scrollViewHeight.value = data.height - 112;
			}).exec();
		},10)
	},
	{ deep: true }
);
watch(
	() => form.startDate,
	(newVal) => {
		if(newVal){
			showClearIcon.value = true;
		}
	},
	{ deep: true }
);
const mTopFn = ()=> {
    return {height: `calc(100% - ${mTop.value}px)`,};
}

//搜索
const searchForm = () => {
	// if(form.deviceName && !uni.$u.test.chinese(form.deviceName)){
	// 	uni.showToast({
	// 		title: '【设备名称】错误，请正确编写',
	// 		icon: 'none',
	// 	});
	// 	return
	// }
	// if(form.deviceCode && !uni.$u.test.number(form.deviceCode)){
	// 	uni.showToast({
	// 		title: '【设备编码】错误，请正确编写',
	// 		icon: 'none',
	// 	});
	// 	return
	// }
	getList();

};
// 获取时间
const dateChange = (e:any)=>{
	if(isDate.value ==1){
		if(form.endDate &&  new Date(e.result) > new Date(form.endDate)){
			uni.showToast({
				title: '开始日期不能晚于结束日期',
				icon: 'none',
			});
			return
		}
		form.startDate = e.result;
	}else{
		if(form.startDate &&  new Date(e.result) < new Date(form.startDate)){
			uni.showToast({
				title: '结束日期不能早于开始日期',
				icon: 'none',
			});
			return
		}
		form.endDate = e.result;
	}
}
//设备状态切换
const deviceStatusConfirm = (e:any)=>{
	form.deviceStatus = deviceStatusList[e[0]].value;
	form.deviceStatusDesc = deviceStatusList[e[0]].label;
}
//跳转故障处理
const goFalutHandle = (data)=> {
	uni.navigateTo({
		// url: `/pages/DeviceFaultRegister/faultHandle?id=${data.id}`
		url: `/pages/RepairConfirm/faultConfirm?barcode=${data.barcode}&id=${data.id}`
	});
}
</script>

<style lang="scss" scoped>
	.bgfff{
		background-color: #fff;
	}
	.page-view{
		position: relative;
		height: 100%;
	}
	.search-view{
		::v-deep .u-form{
			padding: 0 32rpx;
			.u-form-item{
				border-bottom: 1rpx solid #E7ECED;
				padding: 0;
				flex-direction: inherit;
				.u-form-item__body{
					width: 100%;
				}
				.u-form-item--right{
					width: calc(100% - 160rpx);
				}
				.u-form-item--left__content__label{
					height: 48rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.65);
					line-height: 48rpx;
				}
			}
		}
		.select-img{
			transform: rotate(180deg);
		}
		.isSelect{
			transform: rotate(-90deg);
		}
	}
	.search-btn{
		padding: 30rpx 24rpx;
		margin-top: 10rpx;
		.btn{
			width: 100%;
			background: #2F7BFF;
			border: 1rpx solid #2F7BFF;
			color: #FFFFFF;
			height: 88rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
		}
	}
	.content-view{
		overflow-y: auto;
		.item-view{
			padding: 32rpx;
			flex-wrap: wrap;
			>view{
				flex-wrap: nowrap;
			}
			label{
				width: 144rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.45);
			}
			text{
				width: calc(100% - 144rpx);
			}
		}
		.over-item{
			::v-deep .uni-tooltip{
				display: inherit;
				// max-width: calc(100% - 130rpx);
				width: calc(100% - 144rpx);
			}
			text{
				width: 200rpx;
				// width: calc(100% - 144rpx);
			}
		}
	}

</style>
